{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# 初期設定\n",
    "\n",
    "* ヒアドキュメントで吐き出したhtmlをscpで直接アクセスできるサーバに転送するための設定\n",
    "    * セキュリティー的にあまりよくないので、内部のみアクセスできるサーバに漏れても良い検証用サーバのパスワード利用を推奨"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Jupyterで出力したファイルを転送して直接ブラウザで確認するための設定\n",
    "\n",
    "\n",
    "## sshpassのインストール\n",
    "\n",
    "```\n",
    "sudo apt-get install sshpass\n",
    "```\n",
    "\n",
    "## ファイルを転送\n",
    "\n",
    "```\n",
    "### sshpass -p \"(サーバのパスワード)\" scp (転送するhtmlファイル) (サーバのユーザ)@(サーバのアドレス):(転送先)\n",
    "例\n",
    "sshpass -p \"pass\" scp jquery.html ftakao2007@192.168.33.11:/home/ftakao2007\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "pass=\"pass\"\n",
      "user=\"ftakao2007\"\n",
      "host=\"192.168.33.11\"\n",
      "path=\"/home/ftakao2007\"\n",
      "sshpass -p \"pass\" scp jquery.html ftakao2007@192.168.33.11:/home/ftakao2007\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "\n",
    "### 各種認証情報が入ったファイルを作成\n",
    "cat <<- EOS > ${HOME}/secrets\n",
    "pass=\"pass\"\n",
    "user=\"ftakao2007\"\n",
    "host=\"192.168.33.11\"\n",
    "path=\"/home/ftakao2007\"\n",
    "EOS\n",
    "\n",
    "### ファイルの中身を表示\n",
    "cat ${HOME}/secrets\n",
    "\n",
    "### 認証情報を変数に格納\n",
    "source ${HOME}/secrets\n",
    "\n",
    "### scpに利用\n",
    "echo \"sshpass -p \\\"${pass}\\\" scp jquery.html ${user}@${host}:${path}\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# nodeを入れてコマンドでjQueryを実行するための設定\n",
    "\n",
    "いちいち転送してブラウザ起動して確認しなくても良くなる"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## インストール\n",
    "\n",
    "* 安全のためコメントアウトしてます"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "+ jquery@3.2.1\n",
      "+ jsdom@11.0.0\n",
      "added 93 packages in 11.584s\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "npm notice created a lockfile as package-lock.json. You should commit this file.\n",
      "npm WARN jquery_sample@1.0.0 No description\n",
      "npm WARN jquery_sample@1.0.0 No repository field.\n",
      "\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "### Ubuntu16.04, node v8.1.1, jquery@3.2.1, jsdom@11.0.0\n",
    "\n",
    "### nvmのインストール\n",
    "#git clone https://github.com/creationix/nvm.git ~/.nvm\n",
    "#source ~/.nvm/nvm.sh\n",
    "\n",
    "### 最新のnodeをインストール\n",
    "#nvm install `nvm ls-remote | tail -1`\n",
    "#node -v\n",
    "\n",
    "### package.jsonの作成\n",
    "### npm initに相当\n",
    "# cat <<- 'EOS' > package.json\n",
    "# {\n",
    "#   \"name\": \"jquery_sample\",\n",
    "#   \"version\": \"1.0.0\",\n",
    "#   \"description\": \"\",\n",
    "#   \"main\": \"index.js\",\n",
    "#   \"scripts\": {\n",
    "#     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n",
    "#   },\n",
    "#   \"author\": \"\",\n",
    "#   \"license\": \"ISC\"\n",
    "# }\n",
    "# EOS\n",
    "\n",
    "### jqueryとjsdomのインストール\n",
    "#npm install jquery jsdom --save"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0:apple\n",
      "1:orange\n",
      "2:grape\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "\n",
    "### サンプルファイルの作成\n",
    "cat <<- 'EOS' > fruits.js\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "\n",
    "$(function() {\n",
    "\n",
    "    var arr = [ \"apple\", \"orange\", \"grape\" ];\n",
    "    $.each(arr, function(i, val) {\n",
    "        console.log(i+':'+val);\n",
    "    });\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node fruits.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## htmlを読み込んで値を取り出す\n",
    "\n",
    "* index.htmlを読み込んでbodyの内容とjQueryでh1タグ中のテキストを取得して出力する"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<html>\n",
      "  <body>\n",
      "    <div id=\"hoge\">\n",
      "      <h1>h1 text</h1>\n",
      "    </div>\n",
      "  </body>\n",
      "</html>\n",
      "\n",
      "h1 text\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "\n",
    "### htmlファイルの作成\n",
    "cat <<- 'EOS' > index.html\n",
    "<html>\n",
    "  <body>\n",
    "    <div id=\"hoge\">\n",
    "      <h1>h1 text</h1>\n",
    "    </div>\n",
    "  </body>\n",
    "</html>\n",
    "EOS\n",
    "\n",
    "### jsファイルの作成\n",
    "cat <<- 'EOS' > app.js\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "fs.readFile(__dirname + '/index.html', function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "  var body = data.toString();\n",
    "  console.log(body);\n",
    "  console.log($(body).find('h1').text());\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node app.js"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
